<template>
   <div>
     <el-row>
        <el-col :span="5">
        <el-card>
          <div style="color:#409EFF;"><i class="el-icon-shopping-cart-full"></i>查询结果(默认最近一单)</div>
          <div style="padding: 10px 0;text-align: center;font-weight: bold">
           1000
          </div>
        </el-card>
      </el-col>
      
       <el-col :span="10">
        <el-card>
          <div style="color:#e6a23c;"><i class="el-icon-money"></i> 累计未结金额</div>
          <div style="padding: 10px 0;text-align: center;font-weight: bold">
           20000
          </div>
        </el-card>
      </el-col>
      <el-col :span="9">
        <el-card>
          <div style="color:#67c23a;"><i class="el-icon-wallet"></i>年度营业额</div>
          <div style="padding: 10px 0;text-align: center;font-weight: bold">
           100000
          </div>
          
        </el-card>
      </el-col>
     </el-row>
     <el-row :gutter="20">
       <el-col :span="5">
         <div class="grid-content bg-purple">
       <el-tree
      :data="data"
      ref="permTree"
      show-checkbox
      node-key="id"
      default-expand-all= true
    	:check-strictly= true
      :expand-on-click-node="false"
      @check-change="handleNodeClick"
      @check="see"
      :props="defaultProps">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <el-divider direction="vertical"></el-divider>

        <span>
          <el-button
            type="text"
            size="mini"
            @click="append(data)">
            添加
          </el-button>
          <el-divider direction="vertical"></el-divider>

          <el-popconfirm title="确定删除吗？" @confirm="remove(node, data)">
							<el-button type="text"  size="mini" slot="reference">删除</el-button>
          </el-popconfirm>
          
        </span>
      </span>
    </el-tree>
    <el-dialog
				title="添加机构"
				:visible.sync="permDialogVisible"
				width="600px"
				:before-close="handleClose">

			<el-form :model="editPermForm" :rules="editFormRules" ref="editPermForm" label-width="100px" class="demo-editForm">

<el-form-item label="机构名称" prop="name" label-width="100px">
					<el-input style="width: 300px" v-model="editPermForm.name" autocomplete="off" placeholder="请输入机构名称"></el-input>
				</el-form-item>
				<el-form-item label="权限编码" prop="perms" label-width="100px"  >
					<el-input style="width: 300px" v-model="editPermForm.perms" autocomplete="off" placeholder="编码格式'sys:地区名:机构名'"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitPermForm('editPermForm')">立即创建</el-button>
					<el-button @click="resetForm('editPermForm')">重置</el-button>
				</el-form-item>
			</el-form>

		</el-dialog>

           </div>
           </el-col>
  <el-col :span="19">
    <div class="grid-content bg-purple">
 <template>
  <el-table
   :data="tableData.filter(data => !search || data.date.toLowerCase().includes(search.toLowerCase()))"
    border="true"
  
    show-summary
    style="width: 100%">
    <el-table-column label="货单" header-align="center">

         <template slot-scope="scope">
           
           <el-button
          size="mini"
          type="primary"
          v-if="hasAuth('sys:visits:finish')"
          @click="handleFinish(scope.$index, scope.row)">修改</el-button>
           </template>
    
    <el-table-column
      prop="id"
      label="货号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="名称">
    </el-table-column>
    <el-table-column
      prop="unit"
      label="单位">
    </el-table-column>
    <el-table-column
      prop="amount"
      sortable
      label="数量">
    </el-table-column>
    <el-table-column
      prop="specs"
      sortable
      label="规格">
    </el-table-column>
    <el-table-column
      prop="price"
      sortable
      label="单价">
    </el-table-column>
    <el-table-column
      prop="money"
      sortable
      label="金额">
    </el-table-column>
     <el-table-column
      prop="date"
      sortable
      label="日期"
      v-if="false"
     >
    </el-table-column>
    <el-table-column 
    width="150px"
      align="right">
      <template slot="header" slot-scope="scope">
        <el-input
          v-model="search"
          size="mini"
          style="width: 115px"
          placeholder="名字模糊搜索"/>
      </template>
      <template slot-scope="scope">
           <el-button
          size="mini"
          type="primary"
          v-if="hasAuth('sys:visits:modify')"
          @click="handleFinish(scope.$index, scope.row)">修改</el-button>
        <el-button
          size="mini"
          type="danger"
          v-if="hasAuth('sys:visits:delete')"
          @click="handle(scope.$index, scope.row)">删除</el-button>
        
          
      </template>
    
    </el-table-column>
    </el-table-column>
  </el-table>

  
</template>


 
  	<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				layout="total, sizes, prev, pager, next, jumper"
				:page-sizes="[5, 10, 20, 50]"
				:current-page="current"
				:page-size="size"
				:total="total">
		</el-pagination>
   
	<el-dialog
				title="修改数据"
				:visible.sync="dialogVisible"
				width="600px"
				:before-close="handleClose">
			<el-form :model="editForm" ref="editForm" label-width="100px" class="demo-editForm">
     	<el-form-item label="ID" prop="id" label-width="100px">
					<el-input style="width: 300px" v-model="editForm.id" autocomplete="off"></el-input>
				</el-form-item>
       <el-form-item label="姓名" prop="name" label-width="100px">
					<el-input  style="width: 300px" v-model="editForm.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="备注" prop="remarks" label-width="100px">
					<el-input style="width: 300px" v-model="editForm.remarks" autocomplete="off"></el-input>
				</el-form-item>
        <el-form-item>
        <el-upload
  class="upload-demo"
  action="http://127.0.0.1:8081/file/finish"
  ref="uploadFile"
  :auto-upload="false"
  :data="editForm"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :on-change="handleChange"
  :http-request="uploadFile"
  :limit="1"
  
  :on-exceed="handleExceed"
  :file-list="editForm.file">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">上传公告文件，且不超过10M</div>
</el-upload>
        </el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit()" style="display:block;margin:0 160px">提交</el-button>
					
				</el-form-item>
			</el-form>
		</el-dialog>
        
      
    </div>
    </el-col>
  
</el-row>

    
      </div>
    </template>
<script>
let id = 1000;
export default {
name:"Customer", 
data() {
      return {
        tableData: [],
        search: '',
        dialogVisible: false,
        isAchieve:'',
		editForm: {
      id:'',
      name:'',
      remarks:'',
       file:'',
    },
    editPermForm:{
      id:'',
      name:'',
      perms:'',
    },
        permDialogVisible: false,
		permForm: {},
    permTreeData:'',
		defaultProps: {
		   children: 'children',
		    label: 'name'},
      data:[]  
      }
      
    },
    methods: {
      getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            //sums[index] = '总价';
           // return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += ' 元';
          } else {
            sums[index] = 'N/A';
          }
        });

        return sums;},
      handle(index, row) {  
       this.$axios.get("/file/manage?id="+row.id).then(res=>{
         if(res.data){
             this.$message({
						showClose: true,
						message: "操作成功",
						type: 'success',
						onClose:() => {
							this.getOrgList()
						}
					});
         }else{
           this.$message({
            showClose: true,
						message: "操作失败",
						type: 'error',
           })
         }
         
       })
      },
      
      handleFinish(index, row) {
       this.editForm = row
       this.dialogVisible = true
       this.isAchieve=false
      },
       handleAchieve(index, row) {
       this.editForm = row
       this.dialogVisible = true
       this.isAchieve=true
      },
      handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.size = val
				this.getOrgList()
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.current = val
			this.getOrgList()
			},
      onSubmit() {
          this.formDate = new FormData()
          this.$refs.uploadFile.submit();
          this.formDate.append('name', this.editForm.name);
          this.formDate.append('id',this.editForm.id);
          this.formDate.append('remarks',this.editForm.remarks);
          let config = {
              headers: {
                  'Content-Type': 'multipart/form-data'
              }
          }
          this.$axios.post("/file/finish", this.formDate,config).then( res => {
             
              if(res.data.code == 200){
                this.$message({
                  message: res.data.msg,
                  type: 'success',
                onClose:() => {
								this.getOrgList()
                
						}      
                });
                  this.$refs.uploadFile.clearFiles();
                  this.$refs.editForm.resetFields();
                  this.dialogVisible=false
              }else{
                this.$message.error(res.data.msg);
              }
          }).catch( res => {
              console.log(res)
          })
          },
     handleNodeClick(data, checked, node) {

    if(checked === true) {
        this.checkedId = data.id;
        this.$refs.permTree.setCheckedKeys([data.id]);
    } else {
        if (this.checkedId == data.id) {
            this.$refs.permTree.setCheckedKeys([data.id]);
        }
    }
},
	getOrganizationList(){
     this.$axios.get("/file/org",{params: {current: this.current,size: this.size}}).then(res=>{
                     const data=res.data.data.records
                    this.tableData=data
                    this.size = res.data.data.size
					this.current = res.data.data.current
					this.total = res.data.data.total
						})
     },
    submitPermFormHandle(formName) {
      var  data=	this.$refs.permTree.getCheckedNodes()
       
        this.$axios.get("/file/orgList",{params: {
						current: this.current,
						size: this.size,
                        organization:data[0].name
					}}).then(res => {
          const data=res.data.data.records
                    this.tableData=data
                    this.size = res.data.data.size
					this.current = res.data.data.current
					this.total = res.data.data.total
						})
    
             this.permDialogVisible=false
    	},
     getOrgList(){
  var  data=	this.$refs.permTree.getCheckedNodes() 
    
        this.$axios.get("/file/orgList",{params: {
						current: this.current,
						size: this.size,
                        organization:data[0].name
                       
					}}).then(res => {
          const data=res.data.data.records
                    this.tableData=data
                    this.size = res.data.data.size
					this.current = res.data.data.current
					this.total = res.data.data.total
						})
    
             this.permDialogVisible=false
     },
     getTreeList(){
        this.$axios.get('/sys/menu/organizationlist').then(res => {
				this.data = res.data.data
			})
     },
      downLoad(url){
        
     window.open(url);
        
    
    },
     append(data) {
       
       this.editPermForm.id=data.id
       this.permDialogVisible=true
        
      },
      submitPermForm(formName){
      this.$axios.post('/sys/menu/addorg', this.editPermForm)
							.then(res => {
								this.$message({
									showClose: true,
									message: '恭喜你，操作成功',
									type: 'success',
									onClose:() => {
										this.getTreeList()
	                  this.editPermForm={}
									}
								});
            this.permDialogVisible =false
							
						})
      },
      resetForm(formName) {
				this.$refs[formName].resetFields();
				this.editForm = {}
        this.editPermForm={}
			}, 
    handleChange (file, fileList) {
      this.visitsForm.fileList = fileList;
    },
    handleRemove(file, fileList) {
      this.visitsForm.fileList = fileList;
    },
    handlePreview(file) {
     console.log(file)
      

    },
    uploadFile(file){
      this.formDate.append('file', file.file);
    },

      remove(node, data) {
     this.$axios.post("/sys/menu/delete/" + data.id).then(res => {
					this.$message({
						showClose: true,
						message: '恭喜你，操作成功',
						type: 'success',
						onClose:() => {
							this.getTreeList()
						}
					});

      })
      },
        see(data){

    
        this.$axios.get("/file/orgList",{params: {
						current: this.current,
						size: this.size,
                        organization:data.name
                       
					}}).then(res => {
          const data=res.data.data.records
                    this.tableData=data
                    this.size = res.data.data.size
					this.current = res.data.data.current
					this.total = res.data.data.total
						})
    
}
      
    },
     created(){
    
  this.getTreeList()
    },  
}
</script>

<style>
.my-label {
    background: #E1F3D8;
  }
.el-input {
      width:300px;}
  .my-content {
    background: #FDE2E2;
  }
  .el-size{
    width: 20px;
  }
  .el-pagination {
    text-align: center; 
}
</style>
